<template>
  <div class="container">
    <!--  试卷异常   -->
    <div class="sign_box" v-if="!loading">
      <div class="sign">
        <div>
          <i class="el-icon-warning"></i>
          当前为预览页面，仅支持模拟答题
        </div>
      </div>
    </div>

    <card :title="typeText[type]" v-loading="loading">
      <div class="contain">
        <div class="title">
          <ancestorsNameDeal
            max-length="60"
            :text="examInfo.title"
          ></ancestorsNameDeal>
        </div>
        <div class="lines">
          <div class="line" v-if="examInfo.duration != -1">
            <div class="label">{{ typeText[type] }}时间</div>
            <div class="value">{{ examInfo.duration }} 分钟</div>
          </div>
          <div class="line">
            <div class="label">{{ typeText[type] }}总分</div>
            <div class="value">{{ examInfo.totalScore }} 分</div>
          </div>
          <!--   考核才有及格分     -->
          <div v-if="type == 1" class="line">
            <div class="label">及格分数</div>
            <div class="value">{{ examInfo.passingGrade }} 分</div>
          </div>
        </div>
        <div @click="startExam" class="sure_btn">开始{{ typeText[type] }}</div>
        <div class="sign" v-if="examInfo.duration != -1">
          注：点击开始{{
            typeText[type]
          }}后会系统会自动进行倒计时，且不可中断，请谨慎处理！
        </div>
      </div>
    </card>
  </div>
</template>

<script>
import { getExamPaperInfoApi } from '@/api/ExaminationModule'
import { mapGetters } from 'vuex'

export default {
  name: 'actionpreviewPaper',
  computed: {
    ...mapGetters(['name', 'avatar'])
  },
  data() {
    return {
      schoolInfo: {},
      loading: true,
      examInfo: {
        title: ''
      },
      typeText: {
        1: '考核',
        3: '练习',
        6: '作业'
      },
      id: '',
      type: 1
    }
  },
  created() {
    this.schoolInfo = this.$store.getters.schoolInfo
    this.type = this.$route.query.type - 0
    this.id = this.$route.query.id - 0
    this.getExamInfo()
  },
  methods: {
    async getExamInfo() {
      this.loading = true
      try {
        let res = await getExamPaperInfoApi(this.id)
        const { code, data } = res
        if (code == 200) {
          this.examInfo = data
        }
      } catch (e) {
        console.error(e)
      } finally {
        this.loading = false
      }
    },
    startExam() {
      this.$confirm(`是否开始${this.typeText[this.type]}?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$router.replace({
          path: '/previewPaperDetail',
          query: {
            type: this.type,
            id: this.id //考试或者习题id
          }
        })
      })
    }
  }
}
</script>

<style scoped lang="scss">
@import "../../assets/styles/mixin.scss";

::v-deep .back {
  top: 34px !important;
}

.container {
  width: 100%;
  height: 100vh;
  background: #f5f6f7;
  display: flex;
  flex-direction: column;
  align-items: center;

  .header {
    width: 100%;
    height: 68px;
    display: flex;
    justify-content: center;
    background: #ffffff;
    align-items: center;
    box-shadow: 0 0 8px 0 rgba(9, 28, 61, 0.17);

    .header_content {
      width: 1400px;
      padding: 0 36px 0 20px;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;

      .img_logo {
        display: flex;
        align-items: center;

        .logo {
          width: 41px;
          height: 44px;
        }

        .schoolPic_add {
          width: auto !important;
          height: 58px;
        }

        .txt {
          font-size: 18px;
          font-family: PingFangSC-Semibold, PingFang SC, sans-serif;
          font-weight: 600;
          color: #333333;
          line-height: 68px;
          margin-left: 6px;
        }
      }

      .user_info {
        display: flex;
        align-items: center;
        gap: 0 10px;

        .name {
          font-family: PingFangSC-Semibold, PingFang SC, sans-serif;
          font-size: 16px;
          color: #333333;
          font-weight: bold;
        }

        .user_avatar {
          width: 40px;
          height: 40px;
          border-radius: 50%;
        }
      }
    }
  }

  .contain {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 94px;
    box-sizing: border-box;

    .title {
      text-align: center;
      font-size: 18px;
      font-family: PingFangSC-Semibold, PingFang SC, sans-serif;
      font-weight: 600;
      color: #333333;
      margin-bottom: 40px;
    }

    .line {
      display: flex;
      align-items: center;
      gap: 0 16px;
      margin-bottom: 24px;

      .label {
        width: 64px;
        font-family: PingFangSC, PingFang SC, sans-serif;
        font-weight: 400;
        font-size: 16px;
        color: #999999;
      }

      .value {
        font-family: PingFangSC, PingFang SC, sans-serif;
        font-weight: 400;
        font-size: 16px;
        color: #333333;
      }
    }

    .sure_btn {
      margin-top: 40px;
      @include btn_plain(#28b28b, #ffffff) {
        width: 295px;
        height: 40px;
        border-radius: 20px;
        font-family: PingFangSC, PingFang SC, sans-serif;
        font-weight: 500;
        font-size: 16px;
        color: #ffffff;
      }

      &:hover {
        background: #3ac7a0;
      }
    }

    .sign {
      margin-top: 24px;
      font-family: PingFangSC, PingFang SC, sans-serif;
      font-weight: 400;
      font-size: 16px;
      color: #ef7d00;
    }
  }
}

.sign_box {
  width: 100%;
  display: flex;
  justify-content: center;
  position: fixed;
  top: 68px;
  left: 0;
  z-index: 10;

  .sign {
    width: 1200px;
    height: 40px;
    padding: 0 12px;
    box-sizing: border-box;
    background: #fffbe6;
    color: rgba(0, 0, 0, 0.88);
    font-weight: 400;
    font-size: 14px;
    font-family: PingFangSC, PingFang SC, sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;

    .el-icon-warning {
      color: #faad14;
      margin: 0 4px;
    }
  }
}
</style>
